/**
 * Created by Eva on 16/11/17.
 */

$(function(){

  /*
   * drag 1.0
   * create by tony@jentian.com
   * date 2015-08-18
   * 拖动滑块
   */
  (function($){
    $.fn.drag = function(options){
      var x, drag = this, isMove = false, defaults = {
      };
      var options = $.extend(defaults, options);
      //添加背景，文字，滑块
      var html = '<div class="drag_bg"></div>'+
        '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
        '<div class="handler handler_bg"></div>';
      this.append(html);

      var handler = drag.find('.handler');
      var drag_bg = drag.find('.drag_bg');
      var text = drag.find('.drag_text');
      var maxWidth = drag.width() - handler.width();  //能滑动的最大间距

      //鼠标按下时候的x轴的位置
      handler.mousedown(function(e){
        isMove = true;
        x = e.pageX - parseInt(handler.css('left'), 10);
      });

      //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
      $(document).mousemove(function(e){
        var _x = e.pageX - x;
        if(isMove){
          if(_x > 0 && _x <= maxWidth){
            handler.css({'left': _x});
            drag_bg.css({'width': _x});
          }else if(_x > maxWidth){  //鼠标指针移动距离达到最大时清空事件
            dragOk();
          }
        }
      }).mouseup(function(e){
        isMove = false;
        var _x = e.pageX - x;
        if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
          handler.css({'left': 0});
          drag_bg.css({'width': 0});
        }
      });

      //清空事件
      function dragOk(){
        handler.removeClass('handler_bg').addClass('handler_ok_bg');
        text.text('验证通过');
        drag.css({'color': '#fff'});
        handler.unbind('mousedown');
        $(document).unbind('mousemove');
        $(document).unbind('mouseup');
      }
    };
  })(jQuery);
  $('#drag').drag();
});
